<!--本文件由FirstUI授权予长沙京卓网络科技有限公司（手机号： 135 0  7  4 25   295，身份证尾号：90 6   20Q）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
	<view class="fui-preview__wrap" :class="{'fui-preview__unlined':!isBorder,'fui-preview__background':!background}"
		:style="{'border-top-color':borderColor,'border-bottom-color':borderColor,marginTop:marginTop+'rpx',marginBottom:marginBottom+'rpx'}">
		<view class="fui-preview__hd" :style="{paddingLeft:padding+'rpx',paddingRight:padding+'rpx'}"
			v-if="pvd.label || pvd.value">
			<view class="fui-preview__item">
				<text class="fui-preview__label" :class="{'fui-preview__gray':!labelColor}"
					:style="{color:labelColor,fontSize:hdLabelSize+'rpx'}">{{pvd.label || ''}}</text>
				<text class="fui-preview__value-hd" :class="{'fui-preview__color':!hdValColor}"
					:style="{color:hdValColor,fontSize:hdValSize+'rpx'}">{{pvd.value || ''}}</text>
			</view>
			<view :style="{background:borderColor,left:hdLeft+'rpx',right:hdRight+'rpx'}" class="fui-preview__border"
				:class="{'fui-preview__border-color':!borderColor}"></view>
		</view>
		<view class="fui-preview__bd" v-if="pvd.list && pvd.list.length>0"
			:style="{paddingLeft:padding+'rpx',paddingRight:padding+'rpx'}">
			<view class="fui-preview__item" v-for="(item,index) in pvd.list" :key="index">
				<text class="fui-preview__label" :class="{'fui-preview__gray':!labelColor && !item.labelColor}"
					:style="{color:item.labelColor || labelColor,fontSize:bdSize+'rpx'}">{{item.label}}</text>
				<text class="fui-preview__value" :class="{'fui-preview__color':!bdColor && !item.valueColor}"
					:style="{color:item.valueColor || bdColor,fontSize:bdSize+'rpx'}">{{item.value}}</text>
			</view>
		</view>
		<slot></slot>
		<view class="fui-preview__ft" :style="{'border-top-color':borderColor}"
			v-if="pvd.buttons && pvd.buttons.length>0">
			<view :style="{'border-right-color':idx!==pvd.buttons.length-1?borderColor : 'transparent'}"
				:class="[highlight?'fui-preview__hover-weex':'',idx!==pvd.buttons.length-1?'fui-preview__btn-def':'fui-preview__btn']"
				:hover-class="highlight?'fui-preview_hover':''" :hover-stay-time="150" v-for="(btn,idx) in pvd.buttons"
				:key="idx" @tap="handleClick(idx)">
				<text :style="{fontSize:btnSize+'rpx',color:btn.color || '#465CFF'}"
					:class="{'fui-preview__link':!btn.color}">{{btn.text}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "fui-preview",
		emits: ['click'],
		props: {
			previewData: {
				type: Object,
				default () {
					return {}
				}
			},
			background: {
				type: String,
				// #ifdef APP-NVUE
				default: '#fff'
				// #endif
				// #ifndef APP-NVUE
				default: ''
				// #endif
			},
			marginTop: {
				type: [Number, String],
				default: 0
			},
			marginBottom: {
				type: [Number, String],
				default: 0
			},
			//左右间距
			padding: {
				type: [Number, String],
				default: 32
			},
			labelColor: {
				type: String,
				// #ifdef APP-NVUE
				default: '#7F7F7F'
				// #endif
				// #ifndef APP-NVUE
				default: ''
				// #endif
			},
			hdLabelSize: {
				type: [Number, String],
				default: 32
			},
			hdValSize: {
				type: [Number, String],
				default: 36
			},
			hdValColor: {
				type: String,
				// #ifdef APP-NVUE
				default: '#181818'
				// #endif
				// #ifndef APP-NVUE
				default: ''
				// #endif
			},
			bdSize: {
				type: [Number, String],
				default: 28
			},
			bdColor: {
				type: String,
				// #ifdef APP-NVUE
				default: '#181818'
				// #endif
				// #ifndef APP-NVUE
				default: ''
				// #endif
			},
			btnSize: {
				type: [Number, String],
				default: 32
			},
			//按钮是否有点击效果
			highlight: {
				type: Boolean,
				default: true
			},
			hdLeft: {
				type: [Number, String],
				default: 32
			},
			hdRight: {
				type: [Number, String],
				default: 0
			},
			//是否需要preview外层上下线条
			isBorder: {
				type: Boolean,
				default: true
			},
			borderColor: {
				type: String,
				// #ifdef APP-NVUE
				default: '#eee'
				// #endif
				// #ifndef APP-NVUE
				default: ''
				// #endif
			}
		},
		watch: {
			previewData(val) {
				this.initData(val)
			}
		},
		created() {
			this.initData(this.previewData)
		},
		data() {
			return {
				pvd: {}
			};
		},
		methods: {
			initData(val) {
				val = val || {};
				val.list = val.list || [];
				val.buttons = val.buttons || [];
				this.pvd = val;
			},
			handleClick(idx) {
				let params = this.pvd.buttons[idx] || {}
				this.$emit('click', {
					index: idx,
					...params
				})
			}
		}
	}
</script>

<style scoped>
	.fui-preview__wrap {
		/* #ifndef APP-NVUE */
		width: 100%;
		border-top-width: 0;
		border-bottom-width: 0;
		/* #endif */
		flex: 1;
		position: relative;
		overflow: hidden;

		/* #ifdef APP-NVUE */
		border-top-width: 0.5px;
		border-top-style: solid;
		border-bottom-width: 0.5px;
		border-bottom-style: solid;
		/* #endif */
	}

	/* #ifndef APP-NVUE */
	.fui-preview__background {
		background: var(--fui-bg-color, '#fff') !important;
	}

	/* #endif */
	.fui-preview__unlined {
		border-top-width: 0 !important;
		border-bottom-width: 0 !important;
	}

	/* #ifndef APP-NVUE */
	.fui-preview__wrap:before {
		top: 0;
		border-top: 1px solid var(--fui-color-border, #EEEEEE);
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5)
	}

	.fui-preview__wrap:after,
	.fui-preview__wrap:before {
		content: " ";
		position: absolute;
		left: 0;
		right: 0;
		height: 1px;
	}

	.fui-preview__wrap:after {
		bottom: 0;
		border-bottom: 1px solid var(--fui-color-border, #EEEEEE);
		-webkit-transform-origin: 0 100%;
		transform-origin: 0 100%;
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5)
	}

	.fui-preview__unlined::before,
	.fui-preview__unlined::after {
		border-top-width: 0 !important;
		border-bottom-width: 0 !important;
	}

	/* #endif */
	.fui-preview__hd {
		position: relative;
		padding-top: 32rpx;
		padding-bottom: 32rpx;
		text-align: right;
		/* #ifndef APP-NVUE */
		box-sizing: border-box;
		/* #endif */
		line-height: 56rpx;
	}

	.fui-preview__border {
		position: absolute;
		bottom: 0;
		/* #ifdef APP-NVUE */
		height: 0.5px;
		z-index: -1;
		/* #endif */
		/* #ifndef APP-NVUE */
		height: 1px;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		transform-origin: 0 100%;
		z-index: 1;
		/* #endif */
	}

	/* #ifndef APP-NVUE */
	.fui-preview__border-color {
		background: var(--fui-color-border, #EEEEEE) !important;
	}

	/* #endif */

	.fui-preview__value {
		flex: 1;
		text-align: right;
		/* #ifndef APP-NVUE */
		display: block;
		word-break: break-all;
		word-wrap: break-word;
		/* #endif */
	}

	/* #ifndef APP-NVUE */
	.fui-preview__color {
		color: var(--fui-color-title, #181818) !important;
	}

	/* #endif */

	.fui-preview__value-hd {
		font-style: normal;
		font-size: 36rpx;
	}

	.fui-preview__bd {
		flex: 1;
		padding-top: 32rpx;
		padding-bottom: 32rpx;
		line-height: 48rpx;
		/* #ifndef APP-NVUE */
		box-sizing: border-box
			/* #endif */
	}


	.fui-preview__ft {
		flex: 1;
		position: relative;
		height: 100rpx;
		/* #ifdef APP-NVUE */
		border-top-width: 0.5px;
		border-top-style: solid;
		/* #endif */
		/* #ifndef APP-NVUE */
		display: flex;
		border-top-width: 0;
		/* #endif */
		flex-direction: row;
	}

	/* #ifndef APP-NVUE */
	.fui-preview__ft:before {
		content: " ";
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		height: 1px;
		border-top: 1px solid var(--fui-color-border, #EEEEEE);
		transform-origin: 0 0;
		transform: scaleY(.5)
	}

	/* #endif */

	.fui-preview__item {
		padding: 8rpx 0;
		overflow: hidden;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
	}

	.fui-preview__label {
		margin-right: 32rpx;
		/* #ifndef APP-NVUE */
		min-width: 112rpx;
		text-align: justify;
		text-align-last: justify;
		/* #endif */
	}

	/* #ifndef APP-NVUE */
	.fui-preview__gray {
		color: var(--fui-color-subtitle, #7F7F7F) !important;
	}

	/* #endif */

	.fui-preview__btn,
	.fui-preview__btn-def {
		flex: 1;
		text-align: center;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		/* #ifdef H5 */
		cursor: pointer;
		/* #endif */
	}

	.fui-preview__btn-def {
		position: relative;
		/* #ifdef APP-NVUE */
		border-right-width: 0.5px;
		border-right-style: solid;
		/* #endif */
	}

	.fui-preview__link {
		/* #ifdef APP-NVUE */
		color: #465CFF !important;
		/* #endif */
		/* #ifndef APP-NVUE */
		color: var(--fui-color-link, #465CFF) !important;
		/* #endif */
	}

	/* #ifndef APP-NVUE */
	.fui-preview__btn-def::after {
		content: " ";
		position: absolute;
		right: 0;
		top: 0;
		width: 1px;
		bottom: 0;
		border-right: 1px solid var(--fui-color-border, #eee);
		transform-origin: 100% 0;
		transform: scaleX(.5)
	}

	/* #endif */

	/* #ifndef APP-NVUE */
	.fui-preview_hover {
		background-color: var(--fui-bg-color-hover, rgba(0, 0, 0, 0.2)) !important;
	}

	/* #endif */

	/* #ifdef APP-NVUE */
	.fui-preview__hover-weex:active {
		background: rgba(0, 0, 0, 0.2) !important;
	}

	/* #endif */
</style>